<style lang="less">
.details-drawer {
	.arco-drawer-body {
		padding: 0 24px 0;

		.details-drawer__header {
			height: 105px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 8px;

			.user-info {
				padding-left: 72px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;

				.user-avatar {
					width: 56px;
					height: 56px;
					border-radius: 50%;
					overflow: hidden;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0, -50%);

					img {
						width: 100%;
					}
				}

				.user-name {
					color: #262626;
					font-size: 16px;
					margin-bottom: 8px;
					font-weight: 600;
				}

				.user-ip {
					color: #808080;
					font-size: 14px;
				}
			}

			.arco-btn {
				padding: 0 26px;
			}
		}

		.details-drawer__tabs {
			.arco-tabs-nav {
				&::before {
					display: none;
				}
			}

			.arco-tabs-nav-tab-list {
				.arco-tabs-tab {
					&:nth-of-type(1) {
						margin-left: 0;
					}
				}
			}

			.tabs__title {
				color: #262626;
				font-size: 16px;
				margin-bottom: 16px;
			}

			.tabs__item {
				+ .tabs__item {
					margin-top: 42px;
				}

				&.tabs__basic-data {
					.arco-descriptions-row {
						display: flex;
						width: 100%;

						.arco-descriptions-item-label {
							display: block;
							width: auto;
							margin-right: 12px;
						}

						.arco-descriptions-item-value {
							flex: 1;
						}

						&:nth-of-type(1) {
							.arco-descriptions-item-label,
							.arco-descriptions-item-value {
								padding-bottom: 24px;
							}
						}

						.arco-descriptions-item-label {
							padding: 0;
							// padding-right: 60px;
						}

						.arco-descriptions-item-value {
							padding: 0;
						}
					}
				}

				&.pay-situation,
				&.use-situation {
					.tabs__item-content {
						height: 80px;
						display: grid;
						column-gap: 16px;

						.content {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							box-sizing: border-box;
							padding: 16px 16px 12px;
							background: #f4f5f7;

							.content__title {
								color: #595959;
								font-size: 12px;
							}

							.content__data {
								color: #262626;
								font-weight: 600;
								font-size: 20px;
							}
						}
					}
				}

				&.pay-situation {
					.tabs__item-content {
						grid-template-columns: repeat(2, 144px);
					}
				}

				&.use-situation {
					.tabs__item-content {
						height: auto;
						grid-template-columns: repeat(4, 144px);
						grid-template-rows: repeat(2, 80px);
						row-gap: 16px;
					}
				}
			}
		}

		.activity__table {
			.arco-table-tr {
				.arco-table-td {
					&:nth-last-of-type(1) {
						.arco-table-cell {
							color: #386cff;
						}
					}
				}
			}

			.table__operation {
				cursor: pointer;

				& + .table__operation {
					margin-left: 16px;
				}

				&--disabled {
					color: rgba(56, 108, 255, 0.4);
					cursor: not-allowed;
				}

				&--delete {
					color: #ff3c3c;

					&.table__operation--disabled {
						color: rgba(255, 60, 60, 0.4);
						cursor: not-allowed;
					}
				}
			}
		}

		.table__dots {
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			margin-right: 16px;

			&--show {
				background: #38ca29;
			}

			&--hiden {
				background: #ffb53c;
			}

			&--delete {
				background: #ff3c3c;
			}
		}
	}

	.arco-drawer-footer {
		border: none;
		padding: 0;

		.arco-pagination {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 48px;
			border-top: 1px solid #f1f1f1;
		}
	}
}
</style>

<template>
	<a-drawer
		class="details-drawer"
		:width="960"
		:visible="visible"
		unmount-on-close
		@cancel="handleCancel"
		@open="handleOpen"
		@close="handleClose"
	>
		<template #title> 详情 </template>
		<div class="details-drawer__header">
			<div class="user-info">
				<div class="user-avatar">
					<img :src="userBasicData.avatarUrl || 'https://s.tuwenzhibo.com/app/static/69user.png'" alt="" />
				</div>
				<p class="user-name">{{ userBasicData.nickname }}</p>
				<p class="user-ip">IP归属地：{{ userBasicData.ipAddress || '-' }}</p>
			</div>
			<a-button type="outline" @click="onAuthClick">授权</a-button>
		</div>
		<a-tabs class="details-drawer__tabs" :active-key="activeKey" @tab-click="tabClick">
			<a-tab-pane key="basicData" title="基础数据">
				<a-descriptions class="tabs__basic-data tabs__item" :data="userDataDescriptions" title="用户资料" />
				<div class="tabs__item pay-situation">
					<p class="tabs__title">付费情况</p>
					<div class="tabs__item-content">
						<div v-for="it in paySituation" :key="it.title" class="content">
							<p class="content__title">{{ it.title }}</p>
							<p class="content__data">{{ it.data }}</p>
						</div>
					</div>
				</div>
				<div class="tabs__item use-situation">
					<p class="tabs__title">使用情况</p>
					<div class="tabs__item-content">
						<div v-for="it in useSituation" :key="it.title" class="content">
							<p class="content__title">{{ it.title }}</p>
							<p class="content__data">{{ it.data }}</p>
						</div>
					</div>
				</div>
			</a-tab-pane>
			<a-tab-pane key="payRecord" title="付费记录">
				<a-table class="design__table" :columns="payRecordColumns" :data="payRecordData" :pagination="false">
					<template #status="{ record }">
						<template v-if="record.dueDate">
							{{ record.dueDate > nowDate ? '未过期' : '已过期' }}
						</template>
						<template v-else> 未过期 </template>
					</template>
					<template #createTime="{ record }">
						{{ record.createTime ? dateFormat(record.createTime) : '' }}
					</template>
					<template #amount="{ record }">
						{{ record.amount / 100 }}
					</template>
				</a-table>
			</a-tab-pane>
			<a-tab-pane key="activityRecord" title="活动记录">
				<a-table
					class="design__table activity__table"
					:columns="activityRecordColumns"
					:data="activityRecordData"
					:pagination="false"
				>
					<template #createTime="{ record }">
						{{ record.createTime ? dateFormat(record.createTime) : '' }}
					</template>
					<template #title="{ record }">
						<a
							style="color: inherit; font-weight: normal; cursor: pointer"
							:href="`${config.host}/manage/#/index/activityManage/activity/${record.id}`"
							target="_blank"
							>{{ record.title }}</a
						>
					</template>
					<template #activityStatus="{ record }">
						<span
							class="table__dots"
							:class="[
								+record.publishStatus === 1 ? 'table__dots--show' : '',
								+record.isDelete === 1 ? 'table__dots--delete' : '',
								+record.publishStatus === 0 ? 'table__dots--hiden' : '',
							]"
						></span>
						<span>{{
							record.isDelete ? activityStatusMaps[2] : activityStatusMaps[record.publishStatus]
						}}</span>
					</template>
					<template #operation="{ record }">
						<span
							class="table__operation"
							:class="!record.isDelete ? 'table__operation--disabled' : ''"
							@click="recoverActivity(record.id)"
							>删除恢复</span
						>
						<span
							class="table__operation table__operation--delete"
							:class="record.isDelete ? 'table__operation--disabled' : ''"
							@click="deleteActivity(record.id)"
							>删除</span
						>
					</template>
				</a-table>
			</a-tab-pane>
			<a-tab-pane key="loginRecord" title="登录记录">
				<a-table
					class="design__table"
					:columns="loginRecordColumns"
					:data="loginRecordData"
					:pagination="false"
				/>
			</a-tab-pane>
		</a-tabs>
		<template #footer>
			<a-pagination
				v-show="activeKey !== 'basicData'"
				v-model:current="current"
				:total="total"
				@change="currentChange"
			/>
		</template>
	</a-drawer>
</template>

<script setup lang="ts">
import { ref, Ref, reactive, defineProps, withDefaults, defineEmits, watchEffect } from 'vue';
import { Message, TableData, TableColumnData } from '@arco-design/web-vue';
import dateFormat from 'ourwill-feutil/common/dateFormat';
import { activity, order, user } from '@/api';
import config from '@/api/config';
import { fluxFormat } from '@/utils/flux';
import { number } from 'echarts';

interface PropsType {
	visible: boolean;
	userId: number;
}
interface EmitType {
	(e: 'changeDetailsDrawerVisible', v: boolean): void;
	(e: 'auth', v: object): void;
	(e: 'close'): void;
}

const props = withDefaults(defineProps<PropsType>(), {
	visible: false,
});

const emit = defineEmits<EmitType>();

let nowDate = new Date().getTime();

const handleCancel = () => {
	emit('close');
};
const handleOpen = () => {
	getBasicData();
};
const handleClose = () => {
	activeKey.value = 'basicData';
	userBasicData.value = {};
};

const activeKey = ref<string | number>('basicData');
const tabClick = (key: string | number) => {
	current.value = 1;
	total.value = 0;
	activeKey.value = key;
	paginationMaps[activeKey.value]();
};

// 用户资料
const userDataDescriptions = ref([
	{
		label: '用户ID',
		value: '',
	},
	{
		label: '手机',
		value: '',
	},
	{
		label: '注册日期',
		value: '',
	},
	{
		label: '用户名',
		value: '',
	},
	{
		label: '邮箱',
		value: '',
	},
	{
		label: '注册渠道',
		value: '',
	},
]);
// 付费情况
const paySituation = ref([
	{
		title: '付费总金额（元）',
		data: '0',
	},
	{
		title: '付费次数（次）',
		data: '0',
	},
]);
// 使用情况
const useSituation = ref([
	{
		title: '历史活动总数（个）',
		data: '0',
	},
	{
		title: '未删除活动（个）',
		data: '0',
	},
	{
		title: '门票售卖（张）',
		data: '0',
	},
	{
		title: '注册观众（人）',
		data: '0',
	},
	{
		title: '流量消耗（TB）',
		data: '0',
	},
	{
		title: '存储消耗（GB）',
		data: '0',
	},
	{
		title: '短信消耗（条）',
		data: '0',
	},
	{
		title: '邮件消耗（条）',
		data: '0',
	},
]);
// 付费记录
const payRecordColumns = [
	{
		title: '订单编号',
		dataIndex: 'orderNo',
		width: 188,
	},
	{
		title: '购买时间',
		slotName: 'createTime',
		width: 180,
	},
	{
		title: '购买类型',
		dataIndex: 'description',
		width: 140,
	},
	{
		title: '有效期',
		dataIndex: 'dueDate',
		width: 180,
		render({ record }: { record: TableData }) {
			return record.dueDate ? dateFormat(record.dueDate) : '--';
		},
	},
	{
		title: '付款金额',
		dataIndex: 'amount',
		slotName: 'amount',
		width: 140,
	},
	{
		title: '购买渠道',
		dataIndex: 'source',
		width: 140,
	},
	{
		title: '状态',
		slotName: 'status',
		width: 80,
	},
];
const payRecordData = ref([
	//   {
	//     orderNumb: "877532350429440",
	//     buyTime: "2022-06-14 18:20:08",
	//     buyType: "专业版-1年",
	//     validTime: "2022-12-20 12:00:00",
	//     payAmount: "￥7999.00",
	//     buyChannel: "官网",
	//     status: "未过期",
	//   },
]);
// 活动记录
const activityStatusMaps: any = {
	0: '隐藏中',
	1: '展示中',
	2: '已删除',
};
const activityRecordColumns: any = [
	{
		title: '活动ID',
		dataIndex: 'id',
		width: 106,
	},
	{
		title: '创建时间',
		slotName: 'createTime',
		width: 180,
	},
	{
		title: '活动名称',
		dataIndex: 'title',
		slotName: 'title',
		width: 185,
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '活动状态',
		slotName: 'activityStatus',
		width: 112,
	},
	{
		title: '消耗总流量',
		dataIndex: 'totalFlux',
		width: 114,
		render({ record }: { record: TableData }) {
			if (record.totalFlux) {
				fluxFormat(record.totalFlux, 'MB');
			} else {
				return '0MB';
			}
		},
	},
	{
		title: '观看人数（UV）',
		dataIndex: 'uv',
		width: 160,
	},
	{
		title: '观看次数（PV）',
		dataIndex: 'lookNumb',
		width: 160,
	},
	{
		title: '最后推流时间',
		dataIndex: 'finallyPushTime',
		width: 180,
	},
	{
		title: '操作',
		slotName: 'operation',
		// dataIndex: "operation",
		fixed: 'right',
		width: 157,
	},
];
const activityRecordData = ref([]);
const recoverActivity = async (activityId: number) => {
	const { ok, data } = await activity.recoverActivity(activityId);
	if (!ok) {
		return;
	}
	Message.success('恢复成功');
	paginationMaps[activeKey.value]();
};
const deleteActivity = async (activityId: number) => {
	const { ok, data } = await activity.deleteActivity(activityId);
	if (!ok) {
		return;
	}
	Message.success('删除成功');
	paginationMaps[activeKey.value]();
};
// 登录记录
const loginRecordColumns: any = [
	{
		title: '登录时间',
		dataIndex: 'loginTime',
	},
	{
		title: 'IP地址',
		dataIndex: 'ip',
		render({ record }: { record: TableData }) {
			return `${record.ip} ${record.loginAddress}`;
		},
	},
	{
		title: '浏览器',
		dataIndex: 'browser',
	},
	{
		title: '登录方式',
		dataIndex: 'loginType',
	},
	{
		title: '设备',
		dataIndex: 'operatingSystem',
	},
];
let loginRecordData = ref([]);

const current = ref<number>(1);
const total = ref<number>(0);
const getActivityRecords = async () => {
	const params = {
		pageNum: current.value,
		pageSize: 10,
	};
	const { ok, data } = await activity.getActivityRecords(props.userId, params);
	if (!ok) {
		return;
	}
	total.value = data.data.total;
	activityRecordData.value = data.data.records;
};
const getDetalsPayRecords = async () => {
	const userId = Number(props.userId);
	const { ok, data } = await order.getNewPayRecords(userId);
	if (!ok) {
		return;
	}
	payRecordData.value = data.data;
	// total.value = data.data.listInfo.total;
};

const userBasicData: Ref<
	Partial<{ id: number; nickname: string; ipAddress: string; avatarUrl: string; mobPhone: number; username: string }>
> = ref({});
const getBasicData = async () => {
	const { ok, data } = await user.getBasicData(props.userId);
	if (!ok) {
		return;
	}
	userBasicData.value = data.data.userInfo;
	userDataDescriptions.value[0].value = data.data.userInfo.id;
	userDataDescriptions.value[1].value = data.data.userInfo.mobPhone;
	userDataDescriptions.value[2].value = data.data.userInfo.createTime
		? dateFormat(data.data.userInfo.createTime)
		: '';
	userDataDescriptions.value[3].value = data.data.userInfo.username;
	userDataDescriptions.value[4].value = data.data.userInfo.email;
	userDataDescriptions.value[5].value = data.data.userInfo.channel;
	paySituation.value[0].data = data.data.payInfo.amount / 100 + '';
	paySituation.value[1].data = data.data.payInfo.number;
	useSituation.value[0].data = data.data.usedInfo.activityNumWithDel;
	useSituation.value[1].data = data.data.usedInfo.activityNum;
	useSituation.value[2].data = data.data.usedInfo.ticketSaleNum;
	useSituation.value[3].data = data.data.usedInfo.confereeNum;
	useSituation.value[4].data = data.data.usedInfo.fluxUsed;
	useSituation.value[5].data = data.data.usedInfo.spaceUsed;
	useSituation.value[6].data = data.data.usedInfo.smsUsed;
	useSituation.value[7].data = data.data.usedInfo.emailUsed;
};
const getUserLoginRecords = async () => {
	const params = {
		pageNum: current.value,
		pageSize: 10,
	};
	const { ok, data } = await user.getUserLoginRecords(props.userId, params);
	if (!ok) {
		return;
	}
	loginRecordData.value = data.data.list;
	total.value = data.data.total;
};

const paginationMaps: any = {
	basicData: getBasicData,
	payRecord: getDetalsPayRecords,
	activityRecord: getActivityRecords,
	loginRecord: getUserLoginRecords,
};
const currentChange = () => {
	paginationMaps[activeKey.value]();
};

const onAuthClick = () => {
	emit('auth', userBasicData.value);
};
</script>
